<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/vue.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/jquery.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="ele-2.15.7/index.js"></script>
  <script src="myjs/base.js"></script>
  <link rel="stylesheet" href="css/buticks.css">
  <link rel="stylesheet" href="css/base.css">
</head>
<style>

</style>
<body>


<div id="app" style="width: 100%;height: 100%;">
  <el-container style="height: 100%">
    <el-container>
      <el-header style="height: 84px;padding-top: 10px;">
        <myhead ref="head" img-url="image/YYDS.png" title="YYDS影院" :user-msg="userMsg" ></myhead>
      </el-header>

      <el-container>
        <el-main>
          <div class="cinema-information">
              <div class="cinema-information-main">
                <div class="cinema-information-image">
                  <img src="image/cinemaphoto.jpg" style="width: 500px;height: 300px;border: 2px solid white">
                </div>
                <div class="cinema-information-text">
                    <h1>Y Y D S 影 院</h1>
                    <div>湖南省衡阳市珠晖区衡花路18号</div>
                    <div>电话：0734-2918998</div>
                    <div class="cinema-desc-group">
                      <div class="group-title">影院服务 ----------------------</div>
                      <div>改签:电影开始前2小时可以改签</div>
                      <div>优惠:身高1.3m以下儿童半价</div>
                    </div>
                </div>
              </div>
          </div>
          <div class="cinema-movies">
              <el-carousel type="card" height="300px" :autoplay="false" @change="queryArrMovie">
                <el-carousel-item v-for="name in  allMoviesShow.data " :key="name.movieid"  >
                  <el-image :src="name.movieimage" style="width: 100%" ></el-image>
                </el-carousel-item>
              </el-carousel>
          </div>
          <div class="show-list">
            <div class="movie-title">
               <span>{{showMovies.moviename}}</span>
                <span>{{showMovies.grade}}分</span>
            </div>
            <div class="movie-desc">
              <div style="margin-left: 0">时长：{{showMovies.time}}分钟</div><div>类型：{{showMovies.type}}</div><div>主演：</div>
            </div>
            <hr style="clear: left;margin-bottom: 10px">
            <div>
              <div>
                <span>观影时间</span>
                <el-radio-group v-model="time" size="mini" @input="queryShowList">
                  <el-radio-button  :label="showTime(item.time)" v-for="item in times">{{showTime2(item.time)}}</el-radio-button>
                </el-radio-group>
              </div>
              <div>
                <el-table :data="tableData.data" stripe style="width: 100%">
                  <el-table-column prop="time" label="放映时间" >
                    <template slot-scope="scope">
                      <p style="font-size: 20px;font-weight: bold;color: black;padding-left: 5px">{{turnTime(scope.row.starttime)}}</p>
                      <p style="font-size: 14px;color: #a6a9ad">{{turnTime(scope.row.endtime)}}<span>散场</span></p>
                    </template>
                  </el-table-column>
                  <el-table-column prop="cinemadesc" label="版本"></el-table-column>
                  <el-table-column prop="cinemaname" label="放映厅"></el-table-column>
                  <el-table-column prop="sell" label="售价" ></el-table-column>
                  <el-table-column prop="remainseats" label="余票" ></el-table-column>
                  <el-table-column prop="address" label="选座购票" >
                    <template slot-scope="scope">
                      <el-button @click="buytickt(scope.row)" type="primary" size="small">选座购票</el-button>
                      </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <el-dialog title="购票处理" :visible.sync="dialogFormVisible" width="70%" top="50px">
            <el-page-header @back="goBack" ></el-page-header>
            <div style="width: 100%;height: 650px;margin:auto; border: 1px solid #e1f3d8">
            <div style="margin-bottom: 10px">
              <el-steps :active="stepIndex" align-center>
                <el-step title="选择影片场次" description=""></el-step>
                <el-step title="选择座位" description=""></el-step>
                <el-step title="付款" description=""></el-step>
                <el-step title="付款完成" description=""></el-step>
              </el-steps>
            </div>

             <div v-if="stepIndex===2" style="width: 80%;border: 1px solid #eeeeee;margin: auto;height: 580px;">
               <div style="margin-top: 4%;width: 600px;display: inline-block;border: 5px solid;margin-left: 5%;">
                 <div style="background-color: #a6a9ad;display: inline-block;width: 70%;margin:10px 15% ;height: 20px;text-align: center">银幕</div>
                 <div style="width: 500px;margin-left: 10%">
                   <el-checkbox-group v-model="checkboxGroup" max="6" style="margin: 30px 0" @change="show">
                     <el-checkbox-button style="margin: 10px 20px"  v-for=" (value,index) in seats " :disabled="showSeat(index+1)" :label="index+1" :key="index">{{value}}</el-checkbox-button>
                   </el-checkbox-group>
                 </div>
               </div>
<!--               展示信息-->
               <div style="display: inline-block;width:320px ;float: right;clear: both;padding: 10px 10px 0 10px">
                 <div style="float: left;border: 3px solid #eeeeee">
                   <el-image :src="movieMsg.movieimage" style="width: 150px; height: 200px"></el-image>
                 </div>
                 <div>
                   <h2>{{movieMsg.moviename}}</h2>
                   <span>类型:{{movieMsg.type}}</span>
                   <br>
                   <span>时长:2小时10分钟</span>
                 </div>
                 <div class="show-info">
                   <div class="info-item">
                     <span>影院：</span>
                     <span>YYDS影院</span>
                   </div>
                   <div class="info-item">
                     <span>影厅：{{movieMsg.cinemaname}}</span>
                     <span></span>
                   </div>
                   <div class="info-item">
                     <span>版本：</span>
                     <span>{{movieMsg.cinemadesc}}国语</span>
                   </div>
                   <div class="info-item">
                     <span>场次：</span>
                     <span>{{time}}</span>
                   </div>
                   <div class="info-item">
                     <span>票价：</span>
                     <span>￥{{movieMsg.sell}}元/张</span>
                   </div>
                 </div>
                 <div>
                   <div style="margin-bottom: 30px;height: 60px">
                     <span>座位:</span>
                     <div id="seats"><el-button style="margin: 2px 5px"  size="mini" type="danger" v-for="value in selectedSeats">{{value}}</el-button></div>
                     <div v-if="isShow" style="color: red">一次最多只能买6张票</div>
                   </div>
                   <hr>
                   <div>
                     <span >总价：</span>
                     <span style="color: red;font-size: 30px">{{countMoney}}</span>
                   </div>
                   <div style="margin:10px 20%">
                     <span >手机号：</span>
                     <span>{{userMsg.phone}}</span>
                   </div>
                   <div >
                     <el-button style="width: 200px;margin:10px 20%" type="danger" @click="pay" round>确认购买</el-button>
                   </div>
                 </div>
               </div>
               </div>

              <div v-if="stepIndex===3">
                <div style="width: 60%;margin: auto;background-color: #eeeeee;height: 100px;font-size: 20px;padding: 5px">
                  <i class="el-icon-success"></i><span style="margin: 5px">您的订单已提交成功!请尽快付款</span>
                  <p style="padding-left: 20px">金额：<span style="font-size: 30px;padding-left: 5px;color: red">{{countMoney}}</span></p>
                </div>
                <div style="width:60%;margin: auto ;padding-top: 20px">
                  <p style="margin: 10px 0">请选择支付方式:</p>
                  <div >
<!--                    <el-radio v-model="selectPay" label="1" border>余额支付</el-radio>-->
<!--                    <el-radio v-model="selectPay" label="1" border>支付宝支付</el-radio>-->
                    <el-radio v-model="selectPay" label="1" border>余额支付</el-radio>
                    <el-radio v-model="selectPay" label="2" border>支付宝支付</el-radio>
                    <p style="color: red">用户余额:{{userMsg.money}}</p>
                  </div>
                  <div style="margin: 20px 45%">
                    <el-button type="danger" @click="buy">确认支付</el-button>
                  </div>
                </div>

              </div>
              <div v-if="stepIndex===4">
               <div style="width: 25%;margin:30px 40%;padding-top: 30px">
                 <div style="padding-left:80px"><el-image style="width: 100px; height: 100px;border-radius: 50px" src="项目素材/ok.jpg" fit="cover"></el-image></div>
                 <div style="font-size: 20px;margin: 10px">支付成功,<span style="color: red;margin: 5px">{{jstime}}</span>后自动退出界面</div>
               </div>
              </div>
             </div>
            <div v-html="myhtml"></div>
          </el-dialog>
        </el-main>
        <el-footer style="padding: 0px;">
          <!-- footer -->
          <footer class="footer" style="min-width: 1380px;">
            <div class="footer-inner">
              <h3 class="homeico footer-inner-logo"></h3>
              <p class="footer-inner-links">
                <a href="https://www.1905.com/about/aboutus/" target="_blank">关于我们</a><span>|</span>
                <a href="https://www.1905.com/sitemap.html" target="_blank">网站地图</a><span>|</span>
                <a href="https://www.1905.com/jobs/" target="_blank">诚聘英才</a><span>|</span>
                <a href="https://www.1905.com/about/copyright/" target="_blank">版权声明</a><span>|</span>
                <a href="https://www.1905.com/about/contactus/" target="_blank">联系我们</a><span>|</span>
                <a href="https://www.1905.com/error_report/error_report-p-pid-125-cid-126-tid-128.html" target="_blank">帮助与反馈</a><span>|</span>
                <a href="https://www.1905.com/link/" target="_blank">友情链接</a><span>|</span>
                <a href="https://www.1905.com/cctv6/advertise/" target="_blank">CCTV6广告招商</a><!--<span>|</span>
                <a href="javascript:void(0)">合作媒体</a>-->
              </p>
              <div class="footer-inner-bottom">
                <a href="https://www.1905.com/about/licence/" target="_blank" >网络视听许可证0107199号</a>
                <a href="https://www.1905.com/about/cbwjyxkz/" target="_blank" >出版物经营许可证</a>
                <a href="https://www.1905.com/about/jyxyc/" target="_blank" >经营性演出许可证</a>
                <a href="https://www.1905.com/about/gbdsjm/" target="_blank" >广播电视节目制作经营许可证</a>
                <br>
                <a href="https://www.1905.com/about/beian/" target="_blank">企业法人营业执照</a>
                <a href="https://www.1905.com/about/zzdxyw/" target="_blank">增值电信业务经营许可证</a>
                <a href="https://beian.miit.gov.cn" target="_blank">京ICP备12022675号</a>
                <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010202000300" target="_blank">京公网安备 11010202000300号</a>
                <br>
                <ul class="links-ul">
                  <li v-for="name in linksdata.data" style="float: left;display:inline-block; margin-right:23px;">
                    <a :href="name.linkurl">
                      {{name.linkname}}
                    </a>
                  </li>
                </ul>

              </div>
            </div>
          </footer>
          <!-- 版权 -->
          <div class="copy-right" style="min-width: 1380px;width: 100%">
            <div class="copy-right-conts clearfix">
              <div class="right-conts-left fl">
                <span>CopyRight © 2022</span>
                <em>电影频道节目中心官方网站</em><em class="conts-left-margin">|</em>
                <em>
                  <a href="https://www.1905.com/about/icp/" target="_blank">京ICP证100935</a>
                </em>
              </div>
            </div>
          </div>
          <div>
            <template>
              <el-backtop  :bottom="100">
                <div
                        style="{
                                                height: 100%;
                                                width: 100%;
                                                background-color: #f2f5f6;
                                                box-shadow: 0 0 6px rgba(0,0,0, .12);
                                                text-align: center;
                                                line-height: 40px;
                                                color: #1989fa;
                                              }"
                >
                  UP
                </div>
              </el-backtop>
            </template>
          </div>
        </el-footer>

      </el-container>
    </el-container>
  </el-container>
</div>
</body>
<script src="myjs/buyticks.js"></script>
</html>
